<template>
  <div class="mgoods">
    <div class="title">
      <h2>好物</h2>
    </div>

    <div class="goods">
      <router-link
        v-for="item of goodsImg"
        :key="item._id"
        :to="{
            name: 'RecMainDetail',
            params: { _id: item._id },
            query: { collectionName: 'recMainGoods' },
          }"
        class="goods1"
        tag="li"
      >
        <div class="gimg">
          <img :src="$serveUrl + item.url" alt="" />
        </div>
        <div class="gmsg">
          <div class="gtitle">{{ item.title }}</div>
          <div class="gdetail">{{ item.detail }}</div>
          <div class="gprice">￥{{ item.price }}</div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsImg: [],
    };
  },
  mounted() {
    this.$axios({
      url: "/rec/main/recMainGoods",
      params: { _limit: 4 },
    }).then((res) => {
      this.goodsImg = res.data;
    });
  },
  methods: {},
};
</script>

<style scoped>
.mgoods {
  background: #F8F8F8;
  overflow: hidden;
  padding: 0.25rem;
}
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.goods1 {
  overflow: hidden;
  width: 47%;
  /* height: 140px; */
  margin: 0.1rem 0.1rem 0.1rem 0rem;
  background: rgb(240, 240, 240);
  border-radius: 10%;
}
.goods1 img {
  width: 100%;
}
.gmsg {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0.1rem;
}
.gtitle {
  font-size: 15px;
  height: 20px;
  overflow: hidden;
}
.gdetail {
  font-size: 12px;
  color: rgb(148, 148, 148);
  height: 32px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0.1rem 0rem 0.1rem 0rem;
}
.gprice {
  font-size: 14px;
  color: rgb(255, 53, 53);
  font-weight: 600;
}
</style>
